<template>
  <view class="wrapper">
    <view class="nav" :style="{paddingTop: statusbarHeight + 'px'}">
      <view class="title">
        <view class="back" @click="back" v-if="false">
          <u-icon name="arrow-left" color="#333" size="18px"></u-icon>
        </view>
        <text class="text">{{ name }}</text>
      </view>
    </view>
    <view class="main">
      <view class="name" v-if="false">{{ info.name }}</view>
      <view class="avatar">
        <view class="title">店铺照片</view>
        <view class="image">
          <view class="item" v-for="(item, index) in info.descImage" :key="index">
            <u--image
                lazy-load width="160rpx"
                height="160rpx"
                :fade="true" duration="450"
                :src="baseUrl + item.image.thumbnail_path"
                v-if="item.image"></u--image>
          </view>
        </view>
      </view>
      <view class="desc">
        <view class="title">详细资料</view>
        <view class="mobile">
          <text class="text">联系电话:</text>
          <text class="info">{{ info.mobile }}</text>
        </view>
        <view class="address">
          <text class="text">地址:</text>
          <text class="info">{{ info.address }}</text>
        </view>
        <view class="profile">
          <text class="text">简介:</text>
          <text class="info">{{ info.desc }}</text>
        </view>
      </view>
      <view class="service">
        <view class="logout">
          <u-button type="primary" color="#ff0000" text="退出登录" @click="logout"></u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import config from '../../config/config'
import Supplier from '../../api/supplier'
const model = new Supplier()

export default {
  data() {
    return {
      baseUrl: config.baseUrl,
      statusbarHeight: 0,
      info: {},
      name: '我的资料'
    }
  },
  onPullDownRefresh() {
  },
  onReachBottom() {
    // this.getList(true)
  },
  onLoad(options) {
    // 状态栏高度
    uni.getSystemInfo({
      success: res => {
        this.statusbarHeight = res.statusBarHeight
      }
    })
    // 测试中, Mini => 20px, Android => 32px
    // console.log(this.statusbarHeight)
    // this.getList()
  },
  onShow() {
    this.getInfo()
  },
  methods: {
    back() {
      uni.navigateBack()
    },
    getInfo() {
      model.my().then(response => {
        const { data } = response
        // console.log(data)
        this.info = data.model
        // uni.setNavigationBarTitle({
        //   title: this.info.name
        // })
        if (this.info.name) {
          this.name = this.info.name
        }
      })
    },
    logout() {
      uni.showModal({
        title: '您确定要退出登录吗?',
        success: res => {
          if (res.confirm) {
            this.$store.dispatch('User/logout').then(() => {
              uni.navigateTo({
                url: '/pages/bfc/login'
              })
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  background: $background_color;
  padding-bottom: 100px;
  min-height: 100vh;
  .nav {
    z-index: 99999;
    position: sticky;
    top: 0;
    background: white;
    .title {
      height: 44px;
      background: white;
      display: flex;
      align-items: center;
      .back {
        width: 44px;
        display: flex;
        justify-content: center;
      }
      .text {
        flex: 1;
        text-align: center;
        font-weight: 700;
        //margin-left: -44px;
      }
    }
  }
  .main {
    margin: 20rpx;
    font-size: 24rpx;
    .avatar, .desc, .service, .name {
      background: white;
      margin-bottom: 10px;
      border-radius: 10rpx;
      padding: 20rpx;
      .title {
        height: 40px;
        font-weight: 700;
      }
    }
    .name {
      font-weight: 700;
      text-align: center;
      letter-spacing: 3rpx;
      color: red;
      font-size: 30rpx;
    }
    .avatar .image {
      display: flex;
      flex-wrap: wrap;
      .item {
        margin-right: 10rpx;
      }
    }
    .desc {
      view {
        line-height: 40rpx;
        display: flex;
        .text {
          display: inline-block;
          width: 200rpx;
          text-align: right;
          padding-right: 20rpx;
          font-weight: 700;
        }
        .info {
          flex: 1;
          //background: red;
        }
      }
    }
  }
}
</style>
